<template>
  <Layout>
    <Header>
      <Menu mode="horizontal" theme="dark" active-name="1">
        <div class="layout-logo" :style="{color: '#fff'}">Haredot后台管理系统</div>
        <div class="layout-nav">
          <MenuItem name="1">
            <Avatar icon="ios-person"/>
            admin
          </MenuItem>
          <Submenu name="2">
            <template #title>
              <Icon type="ios-stats"/>权限管理系统
            </template>
            <MenuItem name="2-1">权限管理系统</MenuItem>
            <MenuItem name="2-2">爱下载资源分享平台管理系统</MenuItem>
            <MenuItem name="2-3">积分商城管理系统</MenuItem>
          </Submenu>

          <MenuItem name="3" :to="{path: '/login'}">
            <Icon type="logo-codepen"/>
            退出登录
          </MenuItem>
        </div>
      </Menu>
    </Header>
	<div class="layout-content">
		<Layout>
		  <Sider hide-trigger :style="{background: '#fff'}">
			<Menu :active-name="activeItem" theme="light" width="auto" :open-names="openNames" ref="leftMenu" accordion>
			  <Submenu :name="item.id" v-for="(item, index) in menuList" :key="item.id">
				<template #title>
				  <Icon :type="item.icon" size="20"></Icon>
				  {{ item.name }}
				</template>
				<MenuItem v-for="func in item.children"
						  :name="item.id + '-' + func.id"
						  :key="func.id"
						  :to="func.url">{{ func.name }}
				</MenuItem>
			  </Submenu>

			</Menu>
		  </Sider>
		  <!-- 面包屑导航 -->
		  <Layout :style="{padding: '0 24px 24px'}">
			<Breadcrumb :style="{margin: '24px 0'}">
			  <BreadcrumbItem :to="{name: 'home'}">Home</BreadcrumbItem>
			  <BreadcrumbItem>{{ menu.name }}</BreadcrumbItem>
			  <BreadcrumbItem>{{ func.name }}</BreadcrumbItem>
			</Breadcrumb>
			<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
        <!-- 添加 key , 让 视图随路由的更改而切换，可以解决 不同路由对应相同组件无法重新渲染的问题 -->
			  <router-view :key="$route.fullPath"></router-view>
			</Content>
		  </Layout>
		</Layout>
	</div>
  </Layout>
</template>

<script>
export default {

  data() {
    return {
      menu: {}, // 选中的菜单
      func: {}, // 选中的功能
      activeItem: '',
      openNames: [],
      menuList: [
        {
          id: 1,
          name: 'DashBoard',
          icon: 'ios-home',
          children: [
            {
              id: 2,
              name: '主控台',
              url: '/'
            }
          ]
        },
        {
          id: 31,
          name: '系统资源管理',
          icon: 'ios-navigate',
          children: [
            {
              id: 3,
              name: '系统管理',
              url: '/sysView'
            },
            {
              id: 4,
              name: '菜单管理',
              url: '/menuView'
            },
            {
              id: 5,
              name: '功能管理',
              url: '/funcView'
            },
          ]
        },
        {
          id: 6,
          name: '用户权限管理',
          icon: 'ios-keypad',
          children: [
            {
              id: 7,
              name: '组织机构管理',
              url: '/orgView'
            },
            {
              id: 8,
              name: '职务管理',
              url: '/positionView'
            },
            {
              id: 9,
              name: '用户管理',
              url: '/userView'
            },
            {
              id: 10,
              name: '角色权限管理',
              url: '/roleView'
            }
          ]
        },
        {
          id: 11,
          name: '日志管理',
          icon: 'ios-navigate',
          children: [
            {
              id: 4,
              name: '登录日志',
              url: '/log/loginView'
            },
            {
              id: 5,
              name: '操作日志',
              url: '/log/serviceView'
            }
          ]
        },
        {
          id: 17,
          name: '会员管理',
          icon: 'ios-man',
          children: [
            {
              id: 1,
              name: 'SVIP会员配置',
              url: '/svipConfigView'
            },
            {
              id: 2,
              name: '会员信息综合查询',
              url: '/compositeUserQueryView'
            }
          ]
        },
        {
          id: 13, 
          name: "资源管理" ,
          icon: "logo-designernews" ,
          children: [
          {
              id: 10,
              name: '资源分类',
              url: '/resourceTypeView'
             },
             {
              id: 1,
              name: '资源审核',
              url: '/resourceView?state=0&a=verify' 
             },
             {
              id: 2,
              name: '已审核资源',
              url: '/resourceView?state=1&a=audited'
             },
             {
              id: 3,
              name: '未审核通过资源',
              url: '/resourceView?state=-1&a=notApproved'
             },
             {
              id: 4,
              name: '综合资源查询',
              url: '/resourceView?a=all'
             }
          ]
        },
        {
          id: 14, 
          name: "资源评论管理" ,
          icon: "md-hammer" ,
          children: [
             {
              id: 1,
              name: '评论审核',
              url: '/commentView?state=0&a=verify'
             },
             {
              id: 2,
              name: '已审核评论',
              url: '/commentView?state=1&a=audited'
             },
             {
              id: 3,
              name: '未审核通过评论',
              url: '/commentView?state=-1&a=notApproved'
             },
             {
              id: 4,
              name: '综合评论查询',
              url: '/commentView?a=composite'
             }
          ]
        },
        {
          id: 15, 
          name: "广告管理" ,
          icon: "ios-nuclear" ,
          children: [
             {
              id: 1,
              name: '轮播图',
              url: '/swiperView'
             },
             {
              id: 2,
              name: '广告位',
              url: '/advertView'
             },
          ]
        },
        {
          id: 16, 
          name: "系统管理" ,
          icon: "md-aperture" ,
          children: [
            {
              id: 3,
              name: '官方公告',
              url: '/officialAdviceView'
             },
             {
              id: 4,
              name: '积分赠送方案',
              url: '/scoreConfigView'
            },
          ]
        }
      ]
    }
  },
  created() {
    this.positionMenu(this.$route);
  },
  methods: {
    positionMenu(route) {
      // 获取对应的路径, 需要使用 fullPath 替代 path, 否则会产生 BUG
      let path = route.fullPath;  
      // 找到该路径对应的菜单和功能
      let menu = this.menuList.find(menu => {
        this.func = menu.children.find(func => func.url === path);
        return this.func != null;
      });

      if (menu == null) {
        this.func = this.menu = {};
        return;
      }
      // 将找到的菜单赋值给 响应式菜单
      this.menu = menu;
      // 激活的功能是
      this.activeItem = `${menu.id}-${this.func.id}`;
      this.openNames = [menu.id];

      // 更新 子组件 的数据
      this.$nextTick(() => {
        this.$refs.leftMenu.updateOpened();
        this.$refs.leftMenu.updateActiveName();
      })
    }
  },
  watch: {
    "$route": function (route) {
      this.positionMenu(route);
    }
  }
}
</script>

<style lang="less">
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

.layout-content {
  position: relative;
  height: 100%;
  overflow: hidden auto;
}

.ivu-layout {
  height: 100%;
}

.layout-logo {
  float: left;
  position: relative;
  top: 15px;
  left: 0;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

.layout-nav {
  width: 420px;
  margin: 0 20px 0 auto;
}

.ivu-layout-content {
  min-width: 1200px;
}

</style>